<!DOCTYPE html>

<head>
    <meta charset="utf8">
    <!-- 是页面自适应大小 -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <title>事件类型</title>
    <script src="https://unpkg.com/vue@next"></script>

</head>

<body>
    <div id="myapp">
        <div @click="click">单击事件</div>
        <div @dblclick="dblclick">单击事件</div>
        <input @change="change" @focus="focus" @blur="blur" @select="select">
        <div @mousedown="mousedown">鼠标按下</div>
        <div @mouseup="mouseup">鼠标抬起</div>
        <div @mousemove="mousemove">鼠标移动</div>
        <div @mouseover="mouseover" @mouseout="mouseout">鼠标移入移出</div>
        <input @keydown="keydown" @keyup="keyup">
        <br>
        <!-- 按键修饰符 -->
        <!-- Vue中可以使用按键修饰符只对某一个具体的按键监听 -->
        <!-- 按键修饰符 ctrl alt shift meta page-down 等 -->
        <!-- 不同的是event里的命名方式为大写驼峰: PageDown 而vue按键修饰符为中划线驼峰: page-down -->
        <!-- meta按键是指不同系统的系统按键如win 或者 command -->
        <input @keyup.enter="keyup">回车键</input>
        <!-- 按键修饰符最有意义的用法是修饰符连用 -->
        <div @mouseup.ctrl.alt="keyup">同时按下鼠标和ctrl和alt</div>
        <!-- 还有一些针对click和dblclick的(除了他们其他不可用) left左键 right middle -->
        <div @click.left="click">左键单击</div>
        <div @dblclick.left="dblclick">左键双击</div>

    </div>
</body>
<script>
    const app = {
        data() {
            return {

            }
        },
        methods: {
            click() {
                console.log("单击事件");
            },
            dblclick() {
                console.log("双击事件")
            },
            focus() {
                console.log("获取焦点");
            },
            blur() {
                console.log("失去焦点");
            },
            change() {
                console.log("内容改变");
            },
            select() {
                console.log("文本选中");
            },
            mousedown() {
                console.log("鼠标按下");
            },
            mouseup() {
                console.log("鼠标抬起");
            },
            mousemove() {
                console.log("鼠标移动");
            },
            mouseout() {
                console.log("鼠标移出");
            },
            mouseover() {
                console.log("鼠标移入");
            },
            keydown() {
                console.log("键盘按键按下");
            },
            // 一般对按键事件监听推荐使用keyup
            // 可以接收event获取事件更详细的信息
            keyup(event) {
                console.log("键盘按键抬起");
                console.log('抬起的是' + event.key);
            }
        },
        computed: {

        },
        watch: {

        },
    }
    let instance = Vue.createApp(app).mount("#myapp");
</script>